<!--
 * @Author: krsea 965837746@qq.com
 * @Date: 2025-03-03 11:08:50
 * @LastEditors: krsea 965837746@qq.com
 * @LastEditTime: 2025-03-03 14:17:34
 * @FilePath: \vue3-code\2305\week3\pre基础模板通过 props 传递不同的商品数据.html
 * @Description: 讲解要点：
什么是 props：props 是父组件向子组件传递数据的一种方式，就像函数的参数。
如何使用 props：
在子组件中通过 props: ['name', 'price'] 声明需要接收的数据。
在父组件中使用属性（如 name="iPhone 15"）传递数据。
动态性：通过 props，每个 <product-item> 可以展示不同的商品信息。
单向数据流：强调 props 是只读的，子组件不能直接修改传入的 props。
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件的基本使用</title>
    <!-- 引入 vue.js -->
     <script src="../js/vue.js"></script>
</head>
<body>
    <!-- div id 为 app 挂载点 -->
     <div id="app">
        <h2>商品列表</h2>
        <!-- 通过 props 传递不同的商品数据   使用 props 传递数据：父组件可以通过属性绑定将数据传递给子组件  -->
        <product-item name="iPhone 15" price="999"></product-item>
        <product-item name="MacBook Pro" price="1999"></product-item>
     </div>
    
     <!-- 组件模板 -->
    <template id="product-item-template">
        <div>
            <h3>{{ name }}</h3> <!-- 使用 props 数据 -->
            <p>价格: ${{ price }}</p>
        </div>
    </template>

     <!-- 使用 javascript 脚本 -->
      <script type="text/javascript">
        // 定义组件并接收 props
        Vue.component('product-item', {
            template: '#product-item-template',
            props: ['name', 'price'] // 声明需要接收的 props
        });

        // 创建 Vue 实例
        new Vue({
            el: '#app'
        });
      </script>
</body>
</html>